import React, { useState, useCallback } from 'react';
import { Tabs, Form, Table, Input, Button, Select, Divider, Breadcrumb } from 'antd';
import { IAllProps } from '@/typings/types';
import CreateCourse from './component/CreateCourse';
import CreateClassWindow from './component/CreateClassWindow';
import styles from './style.less';

const { TabPane } = Tabs;

const PracticalCurriculum = (props) => {
  const [dataSource, setDataSource] = useState([]);
  const [classDataSource, setClassDataSource] = useState([]);
  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
  const [isShowClassWindow, setIsShowClassWindow] = useState<boolean>(false);

  const handleAddStudent = () => {
    setCreateModalVisible(true);
  };
  const handleHidden = () => {
    setCreateModalVisible(false);
  };

  const handleHiddenClassWindow = useCallback(() => {
    setIsShowClassWindow(false);
  }, []);

  const columns = [
    {
      title: '序号',
      dataIndex: '',
    },
    {
      title: '课程代码',
      dataIndex: '',
    },
    {
      title: '课程名称',
      dataIndex: '',
    },
    {
      title: '实践类型',
      dataIndex: '',
    },
    {
      title: '开课院（系）',
      dataIndex: '',
    },
    {
      title: '适用专业',
      dataIndex: '',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a>查看</a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              // handleUpdateModalVisible(true);
              // setStepFormValues(record);
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <a href="">删除</a>
        </>
      ),
    },
  ];

  const classColumns = [
    {
      title: '序号',
      dataIndex: '',
    },
    {
      title: '课程组名称',
      dataIndex: '',
    },
    {
      title: '所含课程',
      dataIndex: '',
    },
    {
      title: '操作',
      render: (record: IAllProps) => (
        <>
          <a>查看</a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              // handleUpdateModalVisible(true);
              // setStepFormValues(record);
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <a href="">删除</a>
        </>
      ),
    },
  ];

  return (
    <>
      <Breadcrumb className={styles.top}>
        <Breadcrumb.Item>首页</Breadcrumb.Item>
        <Breadcrumb.Item>基础信息</Breadcrumb.Item>
        <Breadcrumb.Item>实践课程</Breadcrumb.Item>
      </Breadcrumb>
      <Tabs defaultActiveKey="1">
        <TabPane tab="课程列表" key="1">
          <Form
            // form={form}
            layout="inline" 
            size="middle"
            name="basic"
            className={styles.inquire}
            initialValues={{}}
            // onFinish={handleSubmit}
          >
            <Form.Item label="院系" name="">
              <Select>
                <Select.Option value="">全部</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="专业" name="">
              <Select>
                <Select.Option value="">全部</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="实践类型" name="">
              <Select>
                <Select.Option value="">全部</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item name="studentName">
              <Input placeholder="请输入课程名称或专业" />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                搜索
              </Button>
            </Form.Item>
          </Form>
          <div className={styles.button}>
            <Button onClick={handleAddStudent}>新增课程</Button>
          </div>
          <Table rowKey="id" columns={columns} dataSource={dataSource} />
          <CreateCourse
            // type={type}
            // willEditStudent={willEditStudent}
            modalVisible={createModalVisible}
            // refreshList={refreshList}
            onCancel={handleHidden}
          />
        </TabPane>

        {/* <TabPane tab="课程组列表" key="2">
          <Input placeholder="请输入课程组名称" className={styles.input} />
          <Button onClick={() => setIsShowClassWindow(true)} className={styles.btn}>
            新增课程组
          </Button>
          <Button className={styles.btn}>查询结果</Button>
          <Table rowKey="id" columns={classColumns} dataSource={classDataSource} />
          <CreateClassWindow modalVisible={isShowClassWindow} onCancel={handleHiddenClassWindow} />
        </TabPane> */}
      </Tabs>
    </>
  );
};

export default PracticalCurriculum;
